<!-- 周期到账弹出窗 -->
<template>
	<div>
		<el-dialog :title="state.title" v-model="state.isShowDialog"  center class="borderRadius10" 
			:width="state.formData.type.includes(2) ? 1420 : 650">
			<div class="cropper-warp">
				<el-form ref="ruleFormRef" :model="state.formData" label-width="120px">
                    <el-form-item label="使用类型：">
						<section style="display: flex; flex-direction: column;">
							<el-checkbox-group v-model="state.formData.type" v-if="state.type == 'useType' || state.type == 'giftUseType'">
								<el-checkbox :label=0 :key=0
									:disabled="state.formData.type.includes(1) || state.formData.type.includes(2)">全部商品</el-checkbox>
								<el-checkbox :label=1 :key=1 :disabled="state.formData.type.includes(0)">商品类型</el-checkbox>
								<el-checkbox :label=2 :key=2 :disabled="state.formData.type.includes(0)">指定商品</el-checkbox>
							</el-checkbox-group>
							<!-- <el-checkbox-group v-model="state.formData.type" v-else>
								<el-checkbox :label=0 :key=0
									:disabled="state.formData.type.includes(1) || 
									state.formData.type.includes(2) || 
									state.formData.type.includes(4)" >不参与</el-checkbox>
								<el-checkbox :label=1 :key=1 :disabled="state.formData.type.includes(0)">全部商品</el-checkbox>
								<el-checkbox :label=2 :key=2 :disabled="state.formData.type.includes(0)">商品类型</el-checkbox>
								<el-checkbox :label=4 :key=4 :disabled="state.formData.type.includes(0)">指定商品</el-checkbox>
							</el-checkbox-group>
							<explainBox msg="折扣类型优先级： 指定商品 > 指定类型 > 全部商品" color="var(--el-color-primary-light-2)" /> -->
						</section>
					</el-form-item>
					<el-form-item label="商品类型：" v-if="state.formData.type.includes(1)">
						<el-cascader ref="typeCascader" v-model="state.formData.typeIdList"
							placeholder="请选择商品类型"  :options="state.productTypeList" clearable 
							:class="state.formData.type.includes(2) ? 'width1280' : 'width450'"
							:props="{  label: 'dictName', value: 'dictValue', children: 'children', multiple: true }" />
					</el-form-item>
					<el-form-item label="商品列表：" v-if="state.formData.type.includes(2)">
						<section style="width:100%">
							<el-button type="primary" @click="addGoodsFile()"> 
								<el-icon> <ele-Plus /> </el-icon> 添加商品
							</el-button>
							<section class="mt10">
								<div class="cropper-warp">
									<el-table v-if="state.showType == 0" v-loading="state.loading" row-key="setId"  :data="state.goodList" ref="goodSpuTableRef"
										@select-all="handleSelectionChange" @select="secectItemFun">
										<el-table-column type="expand" width="1">
											<template #default="props">
												<section v-if="props.row.isShowSkuList">
													<expandSkuMsg ref="expandSkuMsgRef" :setId="props.row.setId" @refreshFun="getGoodsList"
													:selectIdData=state.selectIdData :skuTableData="props.row.skuList"></expandSkuMsg>
												</section>
												<section class="ml80 mr80" v-if="props.row.isShowSpuMsg">
													<el-row>
														<el-col :span="5" class="mb10">
															<span>操作人：{{ props.row.data.updateBy }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>创建人：{{ props.row.data.createdBy }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>操作时间：{{ props.row.data.updateTime }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>创建时间：{{ props.row.data.createdTime }}</span>
														</el-col>
													</el-row>
												</section>
											</template>
										</el-table-column>
										<el-table-column label="" width="20">
											<template #default="scope">
												<el-icon title="展开商品其他信息" @click="expandSpuMsg(scope.row)">
													<ele-CaretRight v-if="!scope.row.isShowSpuMsg"/>
													<ele-CaretBottom v-if="scope.row.isShowSpuMsg"  />
												</el-icon>
											</template>
										</el-table-column>
										<el-table-column type="selection" width="30" :reserve-selection=true />
										<el-table-column label="SPU" width="90" >
											<template #default="scope">
												<span>{{ scope.row.data.spuId }}</span>
											</template>
										</el-table-column>
										<el-table-column label="图片" width="90">
											<template #default="scope">
												<div style="display: flex;justify-content:flex-start;align-items: center;">
													<el-icon title="展开商品Sku"  @click="expandSkuList(scope.row)">
														<ele-Plus v-if="!scope.row.isShowSkuList"/>
														<ele-Minus v-if="scope.row.isShowSkuList"/>
													</el-icon>
													<el-image class="borderRadius5 ml5 mr20" style="width:32px; height: 32px;" :src="scope.row.data.imgUrl"
														fit="cover" />
												</div>
											</template>
										</el-table-column>
										<el-table-column label="品牌"  >
											<template #default="scope">
												<span>{{ scope.row.data.brandIdName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="商品名称" width="380" class-name="aaaa">
											<template #default="scope">
												<span class="ellipsis2">{{ scope.row.data.spuName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="零售价" >
											<template #default="scope">
												<span style="display: flex;align-items: center;"> ￥{{ scope.row.data.priceRange }}&nbsp;
													<el-icon class="iconfont-warp-value"> <ele-Edit /> </el-icon> 
												</span>
											</template>
										</el-table-column>
										
										<el-table-column label="销售渠道">
											<template #default="scope">
												<span>{{ scope.row.data.salesChannelName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="来源">
											<template #default="scope">
												<span>{{ scope.row.data.sourceName }}</span>
											</template>
										</el-table-column>
										<el-table-column prop="title" label="操作" width="120" show-overflow-tooltip>
											<template #default="scope">
												<el-button text type="primary" @click="delItem('spu',scope.row)">
													移除
												</el-button>
											</template>
										</el-table-column>
										<template #empty>
											<el-empty description="暂无数据" />
										</template>
									</el-table>
									<el-table v-if="state.showType == 1" v-loading="state.loading" :data="state.goodList" row-key="setId" 
												ref="goodSkuTableRef" @selection-change="skuSelectionChangeFun">
										<el-table-column type="expand" width="1">
											<template #default="props">
												<section class="ml80 mr80" v-if="props.row.data.isShowSkuMsg">
													<el-row>
														<el-col :span="5" class="mb10">
															<span>操作人：{{ props.row.data.updateBy }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>创建人：{{ props.row.data.createdBy }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>操作时间：{{ props.row.data.updateTime }}</span>
														</el-col>
														<el-col :span="5" class="mb10">
															<span>创建时间：{{ props.row.data.createdTime }}</span>
														</el-col>
													</el-row>
												</section>
											</template>
										</el-table-column>
										<el-table-column label="" width="20" >
											<template #default="scope">
												<el-icon title="展开商品其它信息"  @click="expandSkuMsgFun(scope.row)">
													<ele-CaretRight v-if="!scope.row.isShowSkuMsg"/>
													<ele-CaretBottom v-else-if="scope.row.isShowSkuMsg"  />
												</el-icon>
											</template>
										</el-table-column>
										<el-table-column type="selection" width="30" :reserve-selection=true />
										<el-table-column label="SKU" width="90"  >
											<template #default="scope">
												<span>{{ scope.row.data.skuId }}</span>
											</template>
										</el-table-column>
										<el-table-column label="图片" width="90">
											<template #default="scope">
												<div style="display: flex;justify-content:center;align-items: center;">
													<el-image style="width:32px;height: 32px;" :src="scope.row.data.imgUrl" fit="cover" />
												</div>
											</template>
										</el-table-column>
										<el-table-column label="品牌"  >
											<template #default="scope">
												<span> {{ scope.row.data.brandIdName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="商品名称" width="380" class-name="aaaa">
											<template #default="scope">
												<span> {{ scope.row.data.spuName }} {{ scope.row.data.sku.skuSerialName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="属性">
											<template #default="scope">
												<span>{{ scope.row.data.sku.skuTypeName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="规格">
											<template #default="scope">
												<span>{{ scope.row.data.sku.skuSerialName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="零售价">
											<template #default="scope">
												<span>{{ scope.row.data.sku.retailPrice }}元</span>
											</template>
										</el-table-column>
										<el-table-column label="来源">
											<template #default="scope">
												<span>{{ scope.row.data.sourceName }}</span>
											</template>
										</el-table-column>
										<el-table-column label="销售渠道">
											<template #default="scope">
												<span>{{ scope.row.data.salesChannelName }}</span>
											</template>
										</el-table-column>
										<el-table-column prop="title" label="操作" width="120" show-overflow-tooltip>
											<template #default="scope">
												<el-button text type="primary" @click="delItem('sku',scope.row)">
													移除
												</el-button>
											</template>
										</el-table-column>
										<template #empty>
											<el-empty description="暂无数据" />
										</template>
									</el-table>
									<el-row justify="end">
										<el-col :span="24" class="flex-end-center">
											<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
												:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
												v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
												:total="state.total">
											</el-pagination>
										</el-col>
									</el-row>
								</div>
							</section>
						</section>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" >取 消</el-button>
					<el-button type="primary" @click="onSubmit"  >确 认</el-button>
				</span>
			</template>
		</el-dialog>
		<goodSelectDialog  @goodsSubmitFun="goodsSubmitFun" ref="goodSelectDialogRef" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { goodsOperate,goodsRemove } from '/@/api/commodity';
import { configData } from '/@/api/common';
const expandSkuMsg = defineAsyncComponent(() => import('/@/components/dialog/expandSkuMsgTwo.vue'));
const goodSelectDialog = defineAsyncComponent(() => import('/@/components/dialog/newGoodsSelects.vue'));
// 定义变量内容
const expandSkuMsgRef = ref();
const goodSelectDialogRef = ref();
const goodSpuTableRef = ref<InstanceType<typeof ElTable>>();
const emit = defineEmits(['useTypeListFun'])


const ruleForm = reactive({
	typeList: [],
	selectedTypeList: [] as Array<any>,
})


// 定义变量内容
const state = reactive({
    loading: false,
	dictType:null,
	selectId:0,
	showType:0,
	isShowDialog: false,
	useIndex: 0,
    title:'',
    goodsTableData:[]as Array<any>,
	type:'',
	goodList:[]as Array<any>,
    
	total: 0,
	productTypeList: [] as Array<any>,
	useType:[] as Array<any>,
	formData:{
        type: [] as Array<any>,
		typeIdList: [] as Array<any>,
    },
	param: {
		type : 1,
		keyWord: "",
		pageNum: 1,
		pageSize: 10,  
	},
	
});

// 打开弹窗
const openDialog = ( type: string, data?: any) => {
	state.useType = data;
	state.formData.type = [];
	state.useType.map((obj:any) => {
		state.formData.type.push(obj.selectId);
		if(obj.selectId == 1){
			state.formData.typeIdList = obj.ruleList.map((item:any) => item.itemArray)
		}
		if(obj.selectId == 2){
			state.dictType = obj.ruleList[0].dictType;
		}
	});
	state.goodList = [];
	state.type = type;
	if(type == 'useType'){
		state.title = '储值卡使用类型'
	}else if(type == 'giftUseType'){
		state.title = '储值卡赠金使用类型'
	}else if(type == 'cardBonusPriceUseType'){
		state.title = '储值卡赠金折扣类型'
	}else if(type == 'cardBonusPriceDiscountType'){
		state.title = '储值卡赠金折扣类型'
	}
	// state.formData.type = data;
	getChainList();
	state.isShowDialog = true;
	getGoodsList()
};

const getGoodsList = async () =>{
	let params = {
		dictType: state.dictType,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	const { results,dictType } = await goodsOperate(params);
	if(state.showType == 0){
		state.goodList = results.records.map((obj: any) => ({  
			...obj,
			isExpand:false,
			isShowSpuMsg:false, 
			isShowSkuList:false,  
		}));
	}else if(state.showType == 1){
		state.goodList = results.records.map((obj: any) => ({  
			...obj,
			isShowSkuMsg:false,
		}));
	}
	console.log(state.goodList.length )
	state.dictType = dictType;
	state.loading = false;
	state.total = results.total;
}

const addGoodsFile = () => {
	// console.log(informationVisibel.value)
	let type = null;
	// if(state.goodList.length > 0){
	// 	type = state.showType;
	// }
	goodSelectDialogRef.value.openDialog(type);
}


// 选中关联商品
const goodsSubmitFun = async (list: any,type: number) =>{
	if(list.length > 0){
		state.showType = type;
		if(type == 0){
			let addGoods = list.map((item: any) => { return { dictType: state.dictType,setSpuId: item.spuId, setSkuId: item.skuId,goodsType:type }})
			const { results } = await goodsOperate({selectId:state.selectId,dictType: state.dictType,addGoods:addGoods,goodsType:type});
			state.total = results.total;
			state.goodList = results.records;
		}else{
			let addGoods = list.map((item: any) => { return { dictType: state.dictType,setSkuId: item,goodsType:type }})
			const { results } = await goodsOperate({selectId:state.selectId,dictType: state.dictType,addGoods:addGoods,goodsType:type});
			state.total = results.total;
			state.goodList = results.records;
		}
	}
}

// 获取商品类型列表
const getChainList = async () => {
	const { results } = await configData({ dictType: '' });
	state.productTypeList = results.spuType;
	// state.productTypeList.forEach((Obj: any) => {
	// 	if (Obj.children != null && Obj.children.length > 0) {
	// 		Obj.disabled = true
	// 	}
	// })
}



// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
	let data = []
	state.formData.type.map((item)=>{
		data.push({
			selectId: item,
			ruleList: item == 1 ?  state.formData.typeIdList.map((obj:any) => ({itemArray: obj })) : (item == 2 ? [ {dictType: state.dictType} ]: [])
		})
	})

	emit('useTypeListFun', state.type, data);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">

.pageQueryBoxArea{
	:deep(.el-select){
		.el-input {
			width: 160px !important;
			height: 38px;
			line-height: 38px;
		}
	}
}

.singleChoice{
	:deep(.el-table th.el-table__cell:nth-child(1) .cell ){
		visibility: hidden;
	}
}

.el-form .el-form-item:last-of-type {
    margin-bottom: 18px !important;
}

// 隐藏expand 箭头
:deep(.el-table__expand-column){
    visibility: hidden;
}

:deep(.el-card__body){
	padding-top: 0px !important;
}

.pageContentArea{
	:deep(.el-card__body){
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		flex: 1;
		height: inherit;
		.el-tabs{
			.el-tabs__header{
				margin-bottom: 0;
			}
		}
		.el-table{
			flex: 1;
			.el-table__inner-wrapper::before{
				background: none !important;
			}
			.iconfont-warp-value {
				&:hover {
					color: var(--el-color-primary);
					transition: all 0.2s ease;
				}
			}
			// &:hover {
			// 	box-shadow: 0 2px 12px var(--next-color-dark-hover);
			// 	cursor: pointer;
			// 	transition: all 0.3s ease;
			// 	.iconfont-warp-value {
			// 		i {
			// 			color: var(--el-color-primary);
			// 			transition: all 0.3s ease;
			// 		}
			// 	}
			// 	.iconfont-warp-label {
			// 		color: var(--el-color-primary);
			// 		transition: all 0.3s ease;
			// 	}
			// }
		
		}
		.contentMenuBox{
			.el-dropdown{
				.el-icon{
					margin-right: 0px !important;
				}
			}
		}
	}

	// 隐藏expand 箭头
	:deep(.el-table__expand-column){
		visibility: hidden;
	}
	:deep(.el-table .aaaa .cell ){
		justify-content: left;
		padding-left: 5px;
	}
}


// dsasa
// 隐藏expand 箭头
:deep(.el-dialog){
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-height: calc(50% - 30px);
}
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
